<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yiroon/yiui@main/yi.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yiroon/yiui@main/yiui.simple.css">
    <!-- <link rel="stylesheet" href="css/yiui.css"> -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yiroon/yiui@main/yiui.min.css"> -->
    <style>
        .in{max-width:1200px;margin:auto;padding:0 1rem;}
    </style>
</head>
<body>
    <header class="pd-y-1 shadow-bottom">
        <div class="in flex-middle">
            <div class="hv-ani-push fs-3 bold">LOGO</div>
            <div class="mg-left-auto">
                <div class="nav-mobile-btn">
                    <i></i><i></i><i></i>
                </div>
            </div>
        </div>
    </header>
    <div class="pd-y-1 flex-center">
        <div class="loading-rotating mg-auto"></div>
    </div>
    <div class="pd-y-2">
        <div class="in">
            <h2 class="fs-2 flex-middle">List <span class="mg-left-2 fs-1 no-bold color-medium">很多很多的列表项</span></h2>
            <ul class="l-3 mg-top-1  f-2 fs-2 s-fs-1.2 s-1 for-box-border for-box-light text-center for-spacing-2 for-full s-for-spacing-0.5 color-primary s-for-box-radius-0.5 for-box-radius-1.2  for-box-pd-2.5 for-box-pd-y-4 s-for-box-pd-y-2">
                <li>
                    <div class="box no-events s-flex-middle ">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4 line-4">
                                test description,test description<br>test description<br>
                                test description,test description<br>test description<br>
                                test description,test description<br>test description<br>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box s-flex-middle">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4">test description,test description<br>test description</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box s-flex-middle">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4">test description,test description<br>test description</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box no-events s-flex-middle ">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4 line-4">
                                test description,test description<br>test description<br>
                                test description,test description<br>test description<br>
                                test description,test description<br>test description<br>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box s-flex-middle">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4">test description,test description<br>test description</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box s-flex-middle">
                        <div class="s0x0 mg-auto bg-color-primary" style="width:100px;"></div>
                        <div class="s-col-auto s-text-left s-mg-left-1">
                            <div class="pd-y-1">TEST</div>
                            <div class="fs-1 lh-2 s-lh-1.4">test description,test description<br>test description</div>
                        </div>
                    </div>
                </li>
            </ul>

            <h2 class="fs-2 mg-top-2">Form <span class="mg-left-2 fs-1 no-bold color-medium">yiui.simple.css</span></h2>

            <div class="pd-2 mg-top-1 bg-color-light border-radius-1">
                <table class="for-td-pd-s">
                    <tr><td>姓名：</td><td><input type="text" class="yi-ui"></td></tr>
                    <tr>
                        <td>性别：</td>
                        <td>
                            <label><input name="sexy" class="yi-ui" type="radio"> 男</label>
                            <label><input name="sexy" class="yi-ui" type="radio"> 女</label> 
                        </td>
                    </tr>
                    <tr>
                        <td>接受电话：</td>
                        <td>
                            <input class="yi-switch" type="checkbox">
                        </td>
                    </tr>
                    <tr>
                        <td>城市：</td>
                        <td>
                            <select class="yi-ui" name="" id="">
                                <option value="">广州</option>
                                <option value="">深圳</option>
                                <option value="">北京</option>
                                <option value="">上海</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>其他请填写：</td>
                        <td>
                            <textarea class="yi-ui" name="" id="" cols="30" rows="3"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>文件：</td>
                        <td>
                            <input type="file" class="yi-ui">
                        </td>
                    </tr>
                    <tr>
                        <td>颜色：</td>
                        <td>
                            <input type="color" class="yi-ui">
                        </td>
                    </tr>
                    <tr>
                        <td>范围：</td>
                        <td>
                            <input type="range" class="yi-ui">
                        </td>
                    </tr>
                    <tr>
                        <td>其他请填写：</td>
                        <td>
                            <div class="yi-group">
                                <label> <input type="checkbox" class="yi-ui"> 同意协议 </label>
                                <label> <input type="checkbox" class="yi-ui"> 接受条款 </label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><button class="yi-ui ui-primary" > 提交</button></td>
                    </tr>
                </table>
            </div>


        </div>
    </div>
</body>
</html>